<template>
	<div ref="chinaMapBox" style="width: 100%; height: 100%"></div>
</template>

<script setup>
	import * as echarts from "echarts";
	import {
		ref,
		onMounted,
		watch
	} from "vue";
	import "../assets/china.js";

	const chinaMapBox = ref(null);
	const option = ref(null);
	let myChart = null;

	const myProps = defineProps({
		mapArrData: {
			type: String,
			required: true,
		},

	});

	//监听数据的变化
	watch(
		() => option.value,
		(newvalue, oldvalue) => {
			myChart.setOption(option.value);
		}, {
			deep: true,
		}
	);

	onMounted(() => {
		myChart = echarts.init(chinaMapBox.value, 'dark', {
			renderer: 'canvas',
			useDirtyRect: false
		});
		var app = {};

		option.value = {
			backgroundColor:"#001432",
			series: {
				//表明这是一个地图
				type: 'map',
				mapType: 'china',
				label: {
					normal: {
						//地图文字显示
						show: true,
						//颜色显示
						color: '#000'
					},
					emphasis: {
						show: true,
						color: 'red'
					}
				},
				//地图显示
				data: myProps.mapArrData,
				// 鼠标放在省上,弹出小图标显示的标题
				name: '累计超标'
			},
			visualMap: {
				left: 'left',
				top: 'bottom',
				splitList: [{
					start: 4,
					end: 5,
				}, {
					start: 3,
					end: 4,
				}, {
					start: 2,
					end: 3,
				}, {
					start: 1,
					end: 2,
				}, {
					start: 0,
					end: 1,
				}],
				color: ['#9D2933', '#CB3A56', '#FF7500', '#FAFF72', '#C9dd22'],
				show: true,
			},
			tooltip: {
				trigger: 'item'
			}
		};

		if (option.value && typeof option.value === 'object') {
			myChart.setOption(option.value);
		}

		window.addEventListener('resize', myChart.resize);
	});
</script>

<style>
</style>
